<template>
    <div>
        <!-- 顶部搜索框 -->
        <div class="search">
            <el-input class="inputUser" v-model="nickname" placeholder="请输入用户名"></el-input>
            <el-input class="inputNumber" v-model="id" placeholder="请输入反馈ID"></el-input>
            <el-button type="primary" icon="el-icon-search" @click="search">查找</el-button>
            <download-excel
              class="export-excel-wrapper"
              :data="DetailsForm"
              :fields="json_fields"
              :header="title"
              name="意见反馈信息.xls"
            >
              <!-- 上面可以自定义自己的样式，还可以引用其他组件button -->
              <el-button type="primary" icon="el-icon-download" >导出</el-button>
              </download-excel>
        </div>
        <!-- 表格区域 -->
        <el-table
            class="elTable"
            :data="tableData"
            border
            style="width: 1260px">
            <el-table-column
            class="elColumn"
            prop="id"
            label="反馈ID"
            sortable
            width="180">
            </el-table-column>
            <el-table-column
            prop="username"
            label="用户名"
            width="180">
            </el-table-column>
            <el-table-column
            prop="mobile"
            label="手机号码"
            width="180">
            </el-table-column>
            <el-table-column
            prop="feedType"
            label="反馈类型"
            width="180">
            </el-table-column>
            <el-table-column
            prop="content"
            label="反馈内容"
            width="180">
            </el-table-column>
            <el-table-column
            prop="picUrls"
            label="反馈图片"
            width="180">
            <template slot-scope="scope">
                <img class="imageSize" :src="scope.row.picUrl" alt="">
            </template>
            </el-table-column>
            <el-table-column
            prop="addTime"
            label="时间"
            >
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="block">
            <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40,50,100]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="this.total">
            </el-pagination>
        </div>
    </div>
</template>
<script>
import { feedbackList} from '@/api/userList'
export default{
    name:'feedback',
    props:[],
    data(){
        return{
            nickname:'',
            id:'',
            tableData:[],
            currentPage:1,
            limit:10,
            total:1,
            title:'意见反馈信息',//excel表格标题
            json_fields: {
                "反馈ID":'id',
                "用户名称":'username',
                "反馈内容":'content',
                "返回图片列表":'picUrls',
                "反馈时间":'addTime',
            },
            DetailsForm: [],
        }
    },
    methods:{
         // 搜索按钮
         search(){ 
            feedbackList({
                page:this.currentPage,
                limit:this.limit,
                username:this.nickname,
                sort:'add_time',
                order:'desc',
                id:this.id,
            }).then(res=>{
            console.log(res);
            this.tableData=res.data.items
            this.total=res.data.total
            this.DetailsForm=res.data.items
            })
        },

        // 分页方法
        handleSizeChange(e){
            this.limit=e
            console.log(this.limit);
            feedbackList({
                page:this.currentPage,
                limit:this.limit,
                username:this.nickname,
                id:this.id,
            }).then(res=>{
            console.log(res);
            this.tableData=res.data.items
            this.total=res.data.total
            this.DetailsForm=res.data.items
            })
        },
        handleCurrentChange(e){
            this.currentPage=e
            feedbackList({
                page:this.currentPage,
                limit:this.limit,
                username:this.nickname,
                id:this.id,
            }).then(res=>{
            console.log(res);
            this.tableData=res.data.items
            this.total=res.data.total
            this.DetailsForm=res.data.items
            })
        },
    },
    mounted(){
   
        feedbackList().then(res=>{
            console.log(res);
            this.tableData=res.data.items //赋值给表格内容数据渲染
            this.total=res.data.total  // 将总条数拿出来
            this.DetailsForm=res.data.items  // 导出表格需要的数据
        })
    },
    computed:{
    }
}
</script>
<style lang="less" scoped>
// 顶部查询框
.search{
    margin-top: 20px;
    display: flex;
    justify-content: flex-start;
    .inputUser{
        width: 200px;
        margin-left: 20px;
    }
    .inputNumber{
        width: 200px; 
        margin: 0 10px;
    }
    .export-excel-wrapper{
        margin-left: 10px;
    }
}
// 表格内容
.elTable{
    margin-left: 20px;
    margin-top: 20px;
}
/deep/.cell{
    text-align: center;
}
.imageSize{
    width: 100px;
    height: 80px;
}
// 分页
.block{
    margin-left: 20px;
    margin-top: 30px;
}
</style>